<template>
  <!-- 在template 默认使用 ref对象的value属性 -->
  <!--  建议在  template 中增加一个根标签-->
  <div class="app">
    <div v-html="html"></div>
    {{ x }}
    <hr/>
    {{  html  }}
    <input v-model="html" />
  </div>
</template>
<script   setup>
import {ref} from 'vue'
// 普通变量，不是响应式的，不能双向绑定，但是可以单向绑定
const html ="<h1>1234</h1>"
// 定义一个响应式变量，可以实现双向绑定 
const  x = ref('abc')  //  RefImpl .value 


//  value 
// 在template 默认使用 ref对象的value属性，但是在script中，必须明确使用value属性
console.log(x.value);
</script>
 